<template>
	<view class="tm-pagination flex-center">
		<view v-if="tal" class="flex-start" style="flex-flow: wrap;">
			
			<tm-button :fllowTheme="false" :shadow="4" :icon-size="24" :font-color="nowIndex<=1||disabled?'grey':color_tmeme"  :black="black_tmeme" @click="pre" :disabled="nowIndex<=1||disabled" theme="white" :iteme-class="round?'rounded':''"  height="64"  width="64" icon="icon-angle-left"></tm-button>
			
			
			<block v-for="item in talVis  "  :key = "item">
				
				<tm-button :fllowTheme="false" :shadow="4" 
				v-if="item+t_page <= tal" 
				:disabled="disabled" :black="black_tmeme"  
				:theme="page_num==(item+pageShowIndex)?color_tmeme:'white'" 
				 @click="clicPages(item+pageShowIndex)" 
				 :iteme-class="round?'rounded':''" height="64"  
				 width="64" >{{item+pageShowIndex}}</tm-button>
			</block>
			
			
			<tm-button :fllowTheme="false" :shadow="4" :icon-size="24" 
			:font-color="page_num>nowIndex||page_num>tal-talVis||disabled?'grey':color_tmeme" 
			:black="black_tmeme" theme="white"  @click="next" 
			:disabled="page_num>=total||disabled||(page_num> tal)?true:false"  
			:iteme-class="round?'rounded':''" height="64"  width="64" icon="icon-angle-right">
			</tm-button>
		</view>
	</view>
</template>

<script>
	/**
	 * 分页
	 * @property {Function} change 页面改变时触发。
	 * @property {Number} page = [] 默认：1当前页码，必须使用page.sync
	 * @property {Number} total-visible = [] 默认：5最大可见页数
	 * @property {Number} total = [] 默认：0总条数。
	 * @property {Number} size = [] 默认：8每页的数量。
	 * @property {Boolean} round = [] 默认：false,是否圆形按钮。
	 * @property {Boolean} black = [] 默认：false,是否暗黑模式
	 * @property {Boolean} disabled = [] 默认：false,禁用
	 * @property {String} color = [] 默认：primary,选中的主题色
	 * @example <tm-pagination :page.sync="page" :total="100"></tm-pagination>
	 */
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	export default {
		components:{tmButton},
		name:"tm-pagination",
		props:{
			total:{
				type:Number,
				default:0
			},
			// 最大可见按钮数量。
			totalVisible:{
				type:Number,
				default:5
			},
			// 当前页码。需要page.sync同步。
			page:{
				type:Number,
				default:1
			},
			// 每页的数量 。
			size:{
				type:Number,
				default:10
			},
			// 是否圆形按钮。
			round:{
				type:Boolean,
				default:false
			},
			// 是否暗黑模式
			black:{
				type:Boolean|String,
				default:null
			},
			// 主题色
			color:{
				type:String,
				default:'primary'
			},
			disabled:{
				type:Boolean,
				default:false
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			}
		},
		watch:{
			page:function(val){
				if(val==this.page_num) return;
				this.page_num = val;
			}
		},
		computed:{
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			//总共的页码。
			tal:function(){
				if(this.total<=this.size) return 1;
				let isInt = this.total%this.size;
				let ds = this.total / this.size ;
				
				return isInt==0?Math.floor(ds):Math.floor(ds)+1;
			},
			// 显示多少个按钮。
			talVis:function(){
				
				let vis_page = 3
				if(this.totalVisible<=3){
					vis_page = 3
				}else{
					vis_page = this.totalVisible;
				}
				if(this.tal==0) return 0;
				if(this.tal <= vis_page) return this.tal;
				if(this.tal > vis_page) return vis_page;
				
				return vis_page;
			},

			okList:function(){
				if(this.nowIndex < this.talVis-this.talVis/2) return this.talVis
				if(this.nowIndex == this.talVis-this.talVis/2) return this.talVis-1
				return this.talVis/2
			},
			page_num:{
				get:function(){
					if(this.page<=0) return 1;
					return this.nowIndex;
				},
				set:function(val){
					this.$emit("update:page",val);
					this.$emit("change",val);
					this.nowIndex = val;
				}
			}
		},
		data() {
			return {
				nowIndex:1,
				pageShowIndex:0,
				t_page:0,//总页面
			};
		},
		mounted() {
			this.page_num = this.page;
		},
		methods: {
			clicPages(index) {
				console.log(index);
				this.page_num = index;
			},
			pre(){
				let pxs = this.page_num;
				pxs -=1;
				if(pxs<=0){
					pxs=1;
				}
				this.page_num =pxs;
				if(this.talVis!=0){
					let dqpag = Math.floor(this.page_num / this.talVis) * this.talVis;
					
					if(this.page_num <= dqpag){
						this.t_page = Math.floor(this.page_num / this.talVis);
						this.pageShowIndex = (this.t_page)*this.talVis - this.talVis
						
					}
				}
			},
			next(){
				let pxs = this.page_num;
				pxs+=1;
				if(pxs >= this.tal){
					pxs = this.tal
				}
				this.page_num =pxs;
				
				if(this.talVis!=0){
					let dqpag = Math.floor(this.page_num / this.talVis) * this.talVis;
					if(this.page_num > dqpag){
						this.t_page = Math.floor(this.page_num / this.talVis) * this.talVis;
						
						this.pageShowIndex = this.t_page;
					}
					
					
				}
			}
		},
	}
</script>

<style lang="scss">

</style>
